---
layout: default
---
{% assign author = site.authors[page.author] %}
<div class="container">
	<div class="jumbotron jumbotron-fluid mb-3 pl-0 pt-0 pb-0 bg-white position-relative">
		<div class="h-100 tofront">
			<div class="row {% if page.image %} justify-content-between {% else %} justify-content-center {% endif %}">
				<div class="{% if page.image %} col-md-6 {% else %} col-md-8 {% endif %} pr-0 pr-md-4 pt-4 pb-4 align-self-center">
					<p class="text-uppercase font-weight-bold">
						<span class="catlist">
							{% for category in page.categories %}
							<a class="sscroll text-danger" href="{{ "categories.html" | relative_url }}#{{ category | downcase }}">{{ category | downcase }}</a><span class="sep">, </span>
							{% endfor %}
						</span>
					</p>
					<h1 class="display-4 mb-4 article-headline">{{ page.title }}</h1>
					<div class="d-flex align-items-center">
						{% if author.avatar %}
						<img class="rounded-circle" src="{{author.avatar | relative_url }}" alt="{{author.name}}" width="70" />
						{% endif %}
						<small class="ml-3"> {{ author.name }} <span><a target="_blank" href="{{ author.twitter }}" class="btn btn-outline-success btn-sm btn-round ml-1">Follow</a></span>
							<span class="text-muted d-block mt-1">{{ page.date | date: '%b %d, %Y' }} · {% include meta-read-time.html %}</span>
						</small>
					</div>
				</div>
				{% if page.image %}
				<div class="col-md-6 pr-0 align-self-center">
					<img class="rounded" src="{% if page.image contains "://" %}{{ page.image }}{% else %}{{ page.image | relative_url }}{% endif %}" alt="{{ page.title }}">
				</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>

<div class="container-lg pt-4 pb-4">
	<div class="row justify-content-center">
		<!-- Share -->
		<div class="col-lg-2 pr-4 mb-4 col-md-12">
			<div class="sticky-top sticky-top-offset text-center">
				<div class="text-muted">
					Share this
				</div>
				
			</div>
		</div>

		<div class="col-md-12 col-lg-8">

			<!-- Article -->
			<article class="article-post">
				{{ content }}
			</article>

			<!-- Tags -->
			<div class="mb-4">
				<span class="taglist">
					{% for tag in page.tags %}
					<a class="sscroll btn btn-light btn-sm font-weight-bold" href="{{ "tags.html" | relative_url }}#{{ tag | downcase }}">{{ tag | downcase }}</a>
					{% endfor %}
				</span>
			</div>

			<!-- Mailchimp Subscribe Form -->
			{% if site.mailchimp-list %}
			<div class="border p-5 bg-lightblue">
				<div class="row justify-content-between">
					<div class="col-md-6 mb-2 mb-md-0">
						<h5 class="font-weight-bold">Join Newsletter</h5>
						Get the latest news right in your inbox. We never spam!
					</div>
					<div class="col-md-6">
						<div class="row">
							<form action="{{site.mailchimp-list}}" method="post" name="mc-embedded-subscribe-form" class="wj-contact-form validate w-100" target="_blank" novalidate>
								<div class="mc-field-group">
									<input type="email" placeholder="Enter e-mail address" name="EMAIL" class="required email form-control w-100" id="mce-EMAIL" autocomplete="on" required>
									<button type="submit" value="Subscribe" name="subscribe" class="heart btn btn-success btn-block w-100 mt-2">Subscribe</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			{% endif %}

			<!-- Author Box -->
			{% if page.author %}
			<div class="row mt-5">
				<div class="col-md-2 align-self-center">
					{% if author.avatar %}
					<img class="rounded-circle" src="{{author.avatar | relative_url}}" alt="{{author.name}}" width="90" />
					{% endif %}
				</div>
				<div class="col-md-10">
					<h5 class="font-weight-bold">Written by {{ author.name }} {% if author.twitter %}<span><a target="_blank" href="{{ author.twitter }}" class="btn btn-outline-success btn-sm btn-round ml-2">Follow</a></span>{% endif %}</h5>
					{{ author.bio }}
				</div>
			</div>
			{% endif %}
			
			<!-- AddToAny BEGIN -->
			<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
			<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
			<a class="a2a_button_vk"></a>
			<a class="a2a_button_twitter"></a>
			<a class="a2a_button_facebook"></a>
			<a class="a2a_button_telegram"></a>
			<a class="a2a_button_whatsapp"></a>
			<a class="a2a_button_viber"></a>
			<a class="a2a_button_pocket"></a>
			</div>
			<script async src="https://static.addtoany.com/menu/page.js"></script>
			<!-- AddToAny END -->
			<style>
				.a2a_default_style a{float:left;line-height:16px;padding:0 2px}
.a2a_default_style a:hover .a2a_img, .a2a_default_style a:hover .a2a_svg{opacity:.7}
.a2a_default_style .a2a_img, .a2a_default_style .a2a_svg{display:block;overflow:hidden}
.a2a_default_style .a2a_img{height:16px;line-height:16px;width:16px}
.a2a_default_style .a2a_svg{height:32px;line-height:32px;width:32px;border-radius:4px;}
.a2a_default_style .a2a_img, .a2a_default_style .a2a_dd, .a2a_default_style .a2a_svg{float:left}
.a2a_default_style .a2a_img_text{margin-right:4px}
.a2a_default_style .a2a_divider{border-left:1px solid #000;display:inline;float:left;height:16px;line-height:16px;margin:0 5px}
.a2a_default_style a:hover .a2a_img, .a2a_default_style a:hover .a2a_svg{opacity:1 !important}
.a2a_default_style {margin-top:30px}
			</style>
			
			<!-- Comments -->
			{% if page.comments != false %}
			{% include comments.html %}
			{% endif %}

		</div>
	</div>
</div>

<
